<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="customerAlias" value="%{getText(\"field.customer.alias\")}" />
<s:set var="firstname" value="%{getText(\"field.firstname\")}" />
<s:set var="lastname" value="%{getText(\"field.lastname\")}" />
<s:set var="city" value="%{getText(\"field.city\")}" />
<s:set var="listCustomer" value="%{getText(\"title.list.customer\")}" />
<script type="text/javascript">
  var grid = jQuery("#listCustomer");
  jQuery("#listCustomer").jqGrid(
      {
        url : '${pageContext.request.contextPath}/customer/getCustomers.action',
        datatype : "json",
        colNames : ['ID','version','<s:property value="#customerAlias" />',
            '<s:property value="#firstname" />','<s:property value="#lastname" />',
            '<s:property value="#city" />'],
        colModel : [{
          name : 'id',
          index : 'id',
          editable : false,
          hidden : true,
          editrules : {
            edithidden : false
          },
          width : 10
        },{
          name : 'version',
          index : 'version',
          editable : true,
          hidden : true,
          width : 2
        },{
          name : 'alias',
          index : 'alias',
          editable : true,
          editrules : {
            required : true,
            edithidden : false,
          },
          width : 150
        },{
          name : 'firstname',
          index : 'firstname',
          editable : true,
          width : 100,
          editrules : {
            required : true
          }
        },{
          name : 'lastname',
          index : 'lastname',
          width : 100,
          editable : true,
          sortable : false
        },{
          name : 'city',
          index : 'city',
          width : 100,
          edittype : "select",
          editable : true,
          hidden : true,
          editrules : {
            edithidden : true,
            required : true
          }
        }],
        jsonReader : {
          root : "rows",
          page : "page",
          total : "total",
          records : "records",
          repeatitems : false,
          id : "id",
          cell : "",
          userdata : ""
        },
        rowNum : 10,
        rowList : [10,20,30],
        pager : '#pagingCustomer',
        sortname : 'alias',
        viewrecords : true,
        sortorder : "asc",
        multiselect : false,
        autowidth : true,
        height : 325,
        caption : "<s:property value='#listCustomer' />"
      }).navGrid('#pagingCustomer',{
    edit : true,
    add : true,
    del : false,
    view : true,
    search : false,
    addfunc : function() {
      $('#editCustomer').load('customer/addCustomer.action');
    },
    editfunc : function(id) {
      $('#editCustomer').load('customer/editCustomer.action',{
        'customer.id' : id
      });
    },
    viewfunc : function(id) {
      $('#editCustomer').load('customer/viewCustomer.action',{
        'customer.id' : id
      });
    }
  });
</script>
<div style="width: 100%;">
  <table id="listCustomer"></table>
  <div id="pagingCustomer"></div>
  <div id="editCustomer"></div>
</div>